<template>
    <view class="page-container text-center">
        <view class="pd-10">
            <navigator v-for="(item, index) in courses" :key="index" :url="'/pages/student/course?id=' + item.id">
                <view class="flex mb-2 border-solid border-1 border-gray p-2">
                    <view>
                        <u-image
                            width="100px"
                            height="100px"
                            :src="item.course.img"
                            mode="scaleToFill"
                        />
                    </view>
                    <view class="flex-1 text-left pl-4">
                        <view class="text-lg py-1">{{ item.course_name }}</view>
                        <view class="text-sm">课时： {{ item.learned_num }} / {{ item.course_num + item.send_num }}</view>
                        <view class="text-sm mt-2">有效期：{{ item.valid_end_date }}</view>
                    </view>
                </view>
            </navigator>
        </view>
        <!-- <tabbar></tabbar> -->
    </view>
</template>
<script lang="ts" setup>
    import { ref, watch, computed, onMounted, defineOptions } from 'vue'
    import tabbar from './components/tabbar.vue'
    import { http } from '@/utils/http';
    defineOptions({
        name: 'student',
        inheritAttrs: false
    })

    const courses = ref([])

    onMounted(() => {
        http.get('/api-mini/student/course/list').then(res => {
            const response = res as ApiResponse;
            courses.value = response.data;
        })
    })
    
</script>